<template>
	<div class="create-area">
	<el-form ref="form" :model="procedureDetails" style='height: 180px' :rules="rules" size="mini" label-width="100px" inline>
				<el-form-item prop="code" label="工序编号：" label-width="110px">
					<w-input
						v-model="procedureDetails.code"
						:maxlength="$fxCommon.getFxInputMaxLength('commonCode')"
						:regType="$fxCommon.getFxInputReg('commonCode')"
						class="form-item-input"
						disabled
					></w-input>
				</el-form-item>
				<el-form-item  prop="name" label="工序名称：" label-width="110px">
					<w-input
						v-model="procedureDetails.name"
						:maxlength="$fxCommon.getFxInputMaxLength('commonName')"
						:regType="$fxCommon.getFxInputReg('commonName')"
						class="form-item-input"
					></w-input>
				</el-form-item>
				<el-form-item  prop="bigProcedureType" label="工序大类：" label-width="110px">
					<w-select :multiple='false' v-model="procedureDetails.bigProcedureType"
						:clearable='false' :collapseTags='false' :optionlist='bigProcedureSelectList' :isBlock='true'
						class="form-item-input"
						@change="changeBigType">
					</w-select>
				</el-form-item>
				<el-form-item  prop="smallProcedureType" label="工序小类：" label-width="110px">
					<w-select :multiple='false' v-model="procedureDetails.smallProcedureType" allowCreate
						:clearable='false' :collapseTags='false' :optionlist='smallProcedureSelectList' :isBlock='true'
						class="form-item-input">
					</w-select>
				</el-form-item>
				<el-form-item  prop="enable" label="启停状态：" style="margin-left:10px;" label-width="110px">
					<el-switch v-model="procedureDetails.enable" :active-value="1" :inactive-value="0"  class="form-item-input"></el-switch>
				</el-form-item>
				<el-form-item  label="备注：" label-width="110px">
					<el-input
								v-model="procedureDetails.remark"
								type="textarea"
								:rows="3"
								:maxlength="200"
								placeholder="请输入备注"
								class="form-item-input"
								show-word-limit
								resize="none"
						/>
				</el-form-item>
	</el-form>
	</div>
</template>
<script>
export default {
	name: 'createMaterial',
	props: {
		visibleFlag: Boolean,
		procedureDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		bigProcedureSelectList: {
			type: Array,
			default: () => {
				return []
			}
		},
		smallProcedureSelectList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data () {
		return {
			collapseVisible: true,
			rules: {
				code: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				name: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				bigProcedureType: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				smallProcedureType: [{ required: true, message: '该字段不能为空', trigger: 'change' }]
			}
		}
	},
	watch: {
		visibleFlag: {
			immediate: true,
			handler (val) {
				if (val) {
					this.refresh()
				}
			}
		}
	},
	methods: {
		refresh () {
			this.$nextTick(() => {
				this.$refs.form.clearValidate()
			})
		},
		validate () {
			return this.$refs.form.validate()
		},
		changeBigType (val) {
			this.procedureDetails.smallProcedureType = ''
			this.$emit('on-changeBigType', val)
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.create-area {
	width: 100%
	height: 350px
	box-sizing: border-box
	.form-item-input {
		width:280px
	}
}
.form-item-input-full {
	width:755px
}
.form-item-input-buyer {
	width: 220px
}
.form-item-memo {
	>>>.el-form-item__label {
		padding-left:10px
	}
}
</style>
